<template>
    <VBox :title="'网络配置'">
        <VCenter :row="true" style="max-width:700px; padding:15px">
            <template #head>
                <view class="netLable">ip 地址: </view> 
                <n-input-group class="ipInput">
                    <n-input-number @click="clearError('ip')" v-model:value="ip[0]" max="255" min="0" placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('ip')" v-model:value="ip[1]" max="255" min="0" placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('ip')" v-model:value="ip[2]" max="255" min="0" placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('ip')" v-model:value="ip[3]" max="255" min="0" placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" />
                </n-input-group>
                <view class="error">{{err['ip']}}</view>
            </template>
        </VCenter>
        <VCenter :row="true" style="max-width:700px; padding:15px">
            <template #head>
                <view class="netLable">子网掩码: </view> 
                <n-input-group class="ipInput">
                    <n-input-number @click="clearError('mask')" v-model:value="mask[0]" max="255" min="0" placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('mask')" v-model:value="mask[1]" max="255" min="0" placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('mask')" v-model:value="mask[2]" max="255" min="0" placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('mask')" v-model:value="mask[3]" max="255" min="0" placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" />
                </n-input-group>
                <view class="error">{{err['mask']}}</view>
            </template>
        </VCenter>
        <VCenter :row="true" style="max-width:700px; padding:15px">
            <template #head>
                <view class="netLable">默认网关: </view> 
                <n-input-group class="ipInput">
                    <n-input-number @click="clearError('getway')" v-model:value="getway[0]" max="255" min="0"  placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('getway')" v-model:value="getway[1]" max="255" min="0"  placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('getway')" v-model:value="getway[2]" max="255" min="0"  placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" /><view class="point"><view>.</view></view>
                    <n-input-number @click="clearError('getway')" v-model:value="getway[3]" max="255" min="0"  placeholder="" :show-button="false" :style="{ width: '25%', textAlign:'center' }" />
                </n-input-group>
                <view class="error">{{err['getway']}}</view>
            </template>
        </VCenter>
        <VCenter :row="true" style="padding:20px; padding-left:135px">
            <template #head>
                <!-- 0 加载中...  1 加载成功...  2. 加载失败...   -->
                <n-button color="#197d6d" @click="checkNet"> 网络测试 </n-button>
                <VCenter :row="true" style="padding-top:15px">
                    <template #head>
                        <template v-if="status==2">
                            <view class="netstatus">
                                <!-- <i class="el-icon-check" style="font-size:20px;color:#0cd00c"></i> -->
                                <icon-layer>
                                    <icon icon="circle" style="color: #f00000c7" />
                                    <icon icon="times" transform="shrink-4" style="color: white" />
                                </icon-layer>
                            </view>
                            <view style="color:#f00000c7;font-size:15px;">
                                <span >网络测试失败</span>
                            </view>
                        </template>
                        <template v-if="status==1">
                            <view class="netstatus">
                                <!-- <i class="el-icon-check" style="font-size:20px;color:#0cd00c"></i> -->
                                <icon-layer>
                                    <icon icon="circle" style="color: green" />
                                    <icon icon="check" transform="shrink-6" style="color: white" />
                                </icon-layer>
                            </view>
                            <view style="color:#008000;font-size:15px;">
                                <span >网络通畅</span>
                            </view>
                        </template>
                        <template v-if="status==0">
                            <view class="netstatus">
                                <i class="el-icon-loading" style="color:#75727675"></i>
                            </view>
                            <view style="color:#75727675">
                                <span >测试中...</span>
                            </view>
                        </template>
                    </template>
                </VCenter>
            </template>
        </VCenter>

        <!-- <VCenter :row="true" style="padding:20px; padding-left:135px">
            <template #head>
               <n-button @click="switch">状态测试</n-button>
            </template>
        </VCenter> -->
    </VBox>
</template>
<style scoped>
.point{
    width:0px;
    position: relative;
}
.point>view{
    position: absolute;
    width: 10px;
    height: 34px;
    background: #FFF;
    top: 1px;
    z-index: 10;
    left: -5px;
    color:#e0e0e6;
}
.netstatus{
    padding-left:15px;
    padding-right:5px;
    font-size:20px;
}
.netLable{
    padding-right:10px;
    padding-left:20px;
    width:150px;
}
.error{
    margin-left:15px;
    color:red;
    width:200px;
    font-size:14px;
}

</style>
<script>
import VBox from "@/components/scraw/VBox.vue"
import VCenter from "@/components/scraw/VCenter.vue"
import { getCurrentInstance, ref } from "vue"
export default {
    components:{VBox, VCenter},
    data() {return {
        ip:[null,null,null,null],
        mask:[null,null,null,null],
        getway:[null,null,null,null],
        // ip:[192,168,31,32],
        // mask:[255,255,255,255],
        // getway:[192,168,31,0],
        err: {ip:'', mask:'', getway:''},
        status: null, //0 加载中...  1 加载成功...  2. 加载失败...  
    }},
    methods:{
        switch() {
            if(this.status == 2) {
                this.status = 0 
                return
            }
            this.status = this.status + 1
        },
        checkNet() {
            let flag = true;
            const para = ['ip','mask','getway']
            para.forEach(item=>{
                if(!this.checkValue(this[item])) {
                    this.err[item] = item + '格式错误'
                    flag = false
                }else {
                    this.err[item] = ''
                }
            })

            if(flag) {
                // console.log("测试网络是否通畅");
                let data = {}
                this.status = 0         
                para.forEach(item=>{ data[item] = this[item].join(".") })
                this.$default_hloading.istips = false
                this.$default_hloading.isload = false
                this.$http.get("setConfigNet", {params:{NetConfig: JSON.stringify(data)}}).then(res=>{
                    this.status = res.data.code=="RP_OK_SET" ? 1 : 2
                    this.userInfo.NETCONFIG = JSON.stringify(data)
                }).catch(err=>{
                    this.status = 2
                    console.log(err)
                })
            }
        },       
        checkValue(arr) {
            for(let i = 0; i < 4; i++) {
                var item = arr[i]
                if(null == item || item && typeof(item) != 'number') {
                    return false
                }                               
            }
            return true
        },
        clearError(type) {
            this.err[type] = ''
            this.status = null
        }
    },
    mounted() {
        let netConfig = this.userInfo.NETCONFIG;
        if(netConfig) {
            try{
                var jsonb = JSON.parse(netConfig);
                var paras = ['ip','mask','getway']
                paras.forEach(para=>{
                    this[para] = jsonb[para].split(".").map(item=>{return Number(item)})
                })
            }catch(err){
                console.log(err)
            }
        }
    },
    setup() {
        const { proxy: cthis } = getCurrentInstance();
        return {
            userInfo: ref(cthis.$userInfo)
        }
    },
}
</script>
